Deprecate remaining global duotone functions #49702

ajlende · 2023-04-10T23:50:27Z

What?

Part 2 in a set of duotone php refactoring to fix small issues in duotone rendering.

This part refactors the remaining duotone functions into WP_Duotone_Gutenberg where they have access to private methods and the rest of the duotone code is co-located. Also, added comments for all of the duotone actions and filters explaining what they do and why output_global_styles is priority 11 instead of 10.

Why?

In later parts of this refactoring, some private methods will be needed.
Having the code co-loacted is easier for development since you no longer have to search for global functions in other files.
Having the filters at the top of the file means that you don't have to scroll through unused code.

How?

Deprecated remaining global gutenberg_ functions in duotone.php.
Moved implementations into class-wp-duotone-gutenberg.php.
Moved all deprecated functions in duotone.php to the bottom of the file.

Testing Instructions

Ensure that duotone filters in all of the example content render the same in the post editor, site editor, and frontend.
Test that the custom filters render in classic themes. You can use the same example content which includes some.

Example content for TT3 block-out, canary, and pilgrimage variations

<!-- wp:heading -->
<h2 class="wp-block-heading">Image core preset</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{"duotone":"var:preset|duotone|midnight"}}} -->
<figure class="wp-block-image"><img src="https://loremflickr.com/640/360" alt="placeholder image" class=""/><figcaption class="wp-element-caption">Preset slug: midnight</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Image theme preset</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{"duotone":"var:preset|duotone|default-filter"}}} -->
<figure class="wp-block-image"><img src="https://loremflickr.com/640/360" alt="placeholder image" class=""/><figcaption class="wp-element-caption">Preset slug: default-filter</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Image custom filter</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{"duotone":["rgb(92, 51, 10)","#fcf2e8"]}}} -->
<figure class="wp-block-image"><img src="https://loremflickr.com/640/360" alt="placeholder image" class=""/><figcaption class="wp-element-caption">Custom sepia filter</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Image unset</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image"><img src="https://loremflickr.com/640/360" alt="placeholder image" class=""/><figcaption class="wp-element-caption">This should never have a filter applied</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Image theme.json styles (plain block)</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{}}} -->
<figure class="wp-block-image"><img src="https://loremflickr.com/640/360" alt="placeholder image" class=""/><figcaption class="wp-element-caption"><code>settings.styles.blocks['core/image'].filter.duotone</code></figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Cover core preset</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{"duotone":"var:preset|duotone|midnight"}}} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="placeholder image" src="https://loremflickr.com/640/360" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Preset slug: midnight</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Cover theme preset</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{"duotone":"var:preset|duotone|default-filter"}}} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="placeholder image" src="https://loremflickr.com/640/360" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Preset slug: default-filter</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Cover custom filter</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{"duotone":["rgb(92, 51, 10)","#fcf2e8"]}}} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="placeholder image" src="https://loremflickr.com/640/360" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Custom sepia filter</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Cover unset</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{"duotone":"unset"}}} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="placeholder image" src="https://loremflickr.com/640/360" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">This should never have a filter applied.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Cover theme.json styles (plain block)</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{}}} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="placeholder image" src="https://loremflickr.com/640/360" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
<p class="has-text-align-center">This depends on <code>settings.styles.blocks['core/cover'].filter.duotone being set</code> to the CSS custom property for a preset.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

…ilter_property

scruffian · 2023-04-18T11:51:51Z

lib/class-wp-duotone-gutenberg.php

 	/**
 	 * Gets the SVG for the duotone filter definition from a preset.
 	 *
 	 * @param array $preset The duotone preset.
 	 * @return string The SVG for the filter definition.
 	 */
 	public static function get_filter_svg_from_preset( $preset ) {
-		// TODO: This function will be refactored out in a follow-up PR where it will be deprecated.
-		$filter_id = gutenberg_get_duotone_filter_id( $preset );
+		$filter_id = self::get_filter_id_from_preset( $preset );


Should we have a deprecated call in here?

It looks like we do that here https://github.com/WordPress/gutenberg/pull/49705/files#diff-c6cf688aa7b50316afa7fc57327b6ac81c1ac831226447c53ffc88c32fc23750R1009

scruffian · 2023-04-18T12:02:16Z

lib/block-supports/duotone.php

@@ -5,6 +5,39 @@
 * @package gutenberg
 */

+// Register duotone block supports.


This block looks like it was just moved from below. Is there a reason for that?

It's so you don't have to scroll through 400 lines of deprecated code to see the first line of code that actually does something.

scruffian

LGTM

ajlende added the [Type] Code Quality Issues or PRs that relate to code quality label Apr 10, 2023

ajlende requested a review from spacedmonkey as a code owner April 10, 2023 23:50

ajlende self-assigned this Apr 10, 2023

ajlende mentioned this pull request Apr 10, 2023

Port colord to PHP #49700

Merged

ajlende force-pushed the fix/deprecate-remaining-global-duotone-functions branch from b8594ca to 0e7119c Compare April 11, 2023 00:12

This was referenced Apr 11, 2023

Group duotone outputs and refactor rendering #49705

Merged

Polish duotone rendering code #49706

Merged

Base automatically changed from add/port-duotone-php-to-colord to trunk April 18, 2023 11:34

Alex Lende added 6 commits April 18, 2023 12:49

Refactor duotone to use the colord port

972d4a4

Add deprecation TODO

43d0ca7

Deprecate gutenberg_get_duotone_filter_id and gutenberg_get_duotone_f…

e25dec1

…ilter_property

Refactor gutenberg_register_duotone_support into the class

16a63c1

Move deprecated functions to the bottom of the file

d7f1d31

Move gutenberg_render_duotone_support @deprecated annotation up

6adec60

scruffian force-pushed the fix/deprecate-remaining-global-duotone-functions branch from 0e7119c to 6adec60 Compare April 18, 2023 11:49

scruffian reviewed Apr 18, 2023

View reviewed changes

scruffian approved these changes Apr 18, 2023

View reviewed changes

scruffian merged commit 361f257 into trunk Apr 18, 2023

scruffian deleted the fix/deprecate-remaining-global-duotone-functions branch April 18, 2023 15:41

github-actions bot added this to the Gutenberg 15.7 milestone Apr 18, 2023

ajlende mentioned this pull request Apr 19, 2023

Refactor duotone class to allow instancing #49932

Closed

ramonjd mentioned this pull request Jun 5, 2023

Plugin: Synchronize PHP changes for WordPress 6.3 release #51077

Closed

ramonjd added the Needs PHP backport Needs PHP backport to Core label Jun 5, 2023

MaggieCabrera mentioned this pull request Jun 15, 2023

Backport: Duotone changes WordPress/wordpress-develop#4619

Closed

12 tasks

ramonjd removed the Needs PHP backport Needs PHP backport to Core label Jun 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Deprecate remaining global duotone functions #49702

Deprecate remaining global duotone functions #49702

ajlende commented Apr 10, 2023 •

edited

Loading

scruffian Apr 18, 2023

scruffian Apr 18, 2023

scruffian Apr 18, 2023

ajlende Apr 18, 2023 •

edited

Loading

scruffian left a comment

Deprecate remaining global duotone functions #49702

Deprecate remaining global duotone functions #49702

Conversation

ajlende commented Apr 10, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

scruffian Apr 18, 2023

Choose a reason for hiding this comment

scruffian Apr 18, 2023

Choose a reason for hiding this comment

scruffian Apr 18, 2023

Choose a reason for hiding this comment

ajlende Apr 18, 2023 • edited Loading

Choose a reason for hiding this comment

scruffian left a comment

Choose a reason for hiding this comment

ajlende commented Apr 10, 2023 •

edited

Loading

ajlende Apr 18, 2023 •

edited

Loading